<template>
  <button @click="btnClick">按钮 :{{ count }}</button>
  <!-- 1.v-once ：元素或者组件及其所有子元素只渲染一次 -->
  <button v-once @click="btnClick">按钮 :{{ count }}</button>
  <hr />
  <!-- 2.v-text 等价于下面这种语法 -->
  <span v-text="message"></span>
  <span>{{ message }}</span>

  <hr />
  <!-- 3.v-html 将字符串作为html解析 -->
  <span v-html="HTML"></span>
  <span>{{ HTML }}</span>
  <hr />
  <!-- 4.直接展示mustache标签 -->
  <span v-pre>{{ message }}</span>
  <hr />
  <!-- 5. v-cloak 在模板解析之前展示的时候使用css进行隐藏 -->
  <span v-cloak>1111</span>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const HTML = '<div style="color: red">111{{message}}</div>'
    const count = ref(0)
    const message = 'message'
    const btnClick = () => {
      count.value += 1
    }
    return { count, btnClick, message, HTML }
  },
}
</script>
<style scoped>
[v-cloak] {
  display: none;
}
</style>
